﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Import Namespace="Ctef.Web.Resources.Involve" %>
<%@ Import Namespace="Ctef.Web.Resources.Shared" %>
<asp:Content ContentPlaceHolderID="BottomHead" runat="server">
<script src="<%= Url.Content("~/Scripts/jsrender.js") %>" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        // TODO: do not render slider at all 
        $("div#sliderContainer").remove();
        var scale = 4;

        // thumbnail preview 
        $("div#cardContainer img").live("mouseenter", function () {
            var newWidth = $(this).width() * scale;
            var newHeight = $(this).height() * scale;
            var row = $(this).width(newWidth).height(newHeight).closest('.cardrow');
            row.find('.carddesc').hide();
            row.find('.paypalform').hide();
        }).live("mouseleave", function () {
            var newWidth = $(this).width() / scale;
            var newHeight = $(this).height() / scale;
            var row = $(this).width(newWidth).height(newHeight).closest('.cardrow');
            row.find('.carddesc').show();
            row.find('.paypalform').show();
        });

        $.getJSON('<%= Url.Action("GetCards", "Involve", new { id = ViewData["CurPage"]}) %>', function (data) {
            ctef.holidayCards = data.cards;
            $("#cardContainer").html($("#cardTemplate").render(ctef.holidayCards));
            var url = '<%= Url.Action("CardContest", "Involve") %>';
            var pattern = "involve/cardcontest";
            var index = url.toLocaleLowerCase().indexOf(pattern);
            url = url.substring(0, index + pattern.length);

            var cur = data.current;
            if (cur === 1) { $("#prevLink").hide(); }
            else { $("#prevLink").show().attr("href", url + '/' + (cur - 1).toString()); }

            if (cur === data.total) { { $("#nextLink").hide(); } }
            else { $("#nextLink").show().attr("href", url + '/' + (cur + 1).toString()); }

            var pageSummary = " (page " + cur.toString() + " of " + data.total.toString() + ") ";
            $("#pageCounter").html(pageSummary);
        });
    });
</script> 

</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="LeftContent" runat="server">
    <div id="breadcrumbdiv">
        <%= SharedStrings.Menu_GetInvolved %>
        &gt; Holiday Card Contest
    </div>
    <h2>The Contest</h2>
    <p>Please visit our <a href="http://www.facebook.com/CTEFholidaycard">Facebook page</a> for full event coverage.</p>
    <h2>Shipping Terms</h2>
    <p>Currently we are only able to ship to the United States. Shipping is free to the Continental United States. 
    Customers from Hawaii, Alaska and other regions please email 
    <a href="mailto:holidaycard@ctef.org">holidaycard@ctef.org</a> to quote shipping rates before placing orders. 
    Orders will be processed within 2 days of submission and we do not offer express shipping at this time. </p>

    <div style="clear: both;">
        <hr />
    </div>
    <div id="cardContainer"></div>
    <div id="pagingContainer">
        <a id="prevLink">&lt;&lt;</a><span id="pageCounter"></span><a id="nextLink">&gt;&gt;</a>
    </div>
    <script id="cardTemplate" type="text/x-jsrender">
    <div class="cardrow">
	    <div style="float: left; width: 150px;">
            <img src="<%= Url.Content("{{:url}}") %>" width="{{:width}}" height="{{:height}}" alt="card image" />
        </div>
        <div class="carddesc" style="float: left; width: 250px;">
            Item number: {{:id}}</div>
        <div class="paypalform" style="float: left;">
            <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
                <input type="hidden" name="cmd" value="_s-xclick">
                <input type="hidden" name="hosted_button_id" value="{{:buttonid}}">
                <table>
                <tr><td><input type="hidden" name="on0" value="Quantity">Choose Quantity</td></tr><tr><td><select name="os0">
	                <option value="12 Cards">12 Cards $24.00 USD</option>
	                <option value="24 Cards">24 Cards $48.00 USD</option>
	                <option value="36 Cards">36 Cards $72.00 USD</option>
	                <option value="48 Cards">48 Cards $96.00 USD</option>
                </select> </td></tr>
                </table>
                <input type="hidden" name="currency_code" value="USD">
                <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
            </form>
        </div>
        <div style="clear: both;">
            <hr />
        </div>
    </div>
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="TopHead" runat="server">
</asp:Content>
